<template>
  <!-- 工作票列表 -->
  <a-modal
    v-model:open="visible"
    title="工作票列表"
    @ok="handleOk"
    class="addStation"
    destroyOnClose
    :width="960"
    @cancel="cancel"
    centered
  >
    <div class="details">
      <div class="content">
        <div class="title">基础信息</div>
        <div class="detailsInfo">
          <div class="infoItem">
            <div class="itemLabel">电站名称：</div>
            <div class="itemName">{{ infoData.stationName }}</div>
          </div>
          <div class="infoItem">
            <div class="itemLabel">项目名称：</div>
            <div class="itemName">{{ infoData.companyName }}</div>
          </div>
          <div class="infoItem">
            <div class="itemLabel">地点：</div>
            <div class="itemName">{{ infoData.location }}</div>
          </div>
          <div class="infoItem">
            <div class="itemLabel">工单编号：</div>
            <div class="itemName">{{ infoData.serialCode }}</div>
          </div>
          <div class="infoItem">
            <div class="itemLabel">工单状态：</div>
            <div class="itemName">{{ infoData.stateStr }}</div>
          </div>
          <div class="infoItem">
            <div class="itemLabel">关联工作票个数：</div>
            <div class="itemName">{{ infoData.workTicketDtoList?.length }}</div>
          </div>
          <div class="infoItem" v-if="workOrderType == WORK_ORDER_TYPE.ERROR">
            <div class="itemLabel">优先级：</div>
            <div class="itemName">
              {{ infoData.exceptionPriorityStr }}
            </div>
          </div>
          <div class="infoItem" v-if="workOrderType == WORK_ORDER_TYPE.ERROR">
            <div class="itemLabel">问题描述：</div>
            <div class="itemName">{{ infoData.exceptionDesc }}</div>
          </div>
          <div class="infoItem" v-if="workOrderType == WORK_ORDER_TYPE.ERROR">
            <div class="itemLabel">运营部建议：</div>
            <div class="itemName">{{ infoData.exceptionOperateSuggest }}</div>
          </div>
          <div class="infoItem" v-if="workOrderType == WORK_ORDER_TYPE.ERROR">
            <div class="itemLabel">工单附件：</div>
            <div class="itemName">
              <div
                v-if="infoData.attachmentFileId"
                @click="dowload(infoData.attachmentFileId)"
                class="downloadBtn"
              >
                1
              </div>
              <span v-else>--</span>
            </div>
          </div>
          <!-- <div class="infoItem">
            <div class="itemLabel">发起人：</div>
            <div class="itemName">{{ infoData.inititaor }}</div>
          </div>
          <div class="infoItem">
            <div class="itemLabel">发起时间：</div>
            <div class="itemName">{{ infoData.initiatorTime }}</div>
          </div> -->
        </div>
      </div>
      <div class="content">
        <div class="title">工作票信息</div>
        <a-table
          :dataSource="infoData.workTicketDtoList"
          :columns="columns"
          size="small"
          :scroll="tableScroll"
          @resizeColumn="handleResizeColumn"
          pagination
          :loading="tableLoading"
          class="table"
          :locale="locale"
        >
          <template #bodyCell="{ column, record, index }">
            <template v-if="column.key === 'index'">
              {{ index + 1 }}
            </template>
            <template v-if="column.key === 'state'">
              {{ TICKET_STATUS[record.state] }}
            </template>

            <template v-if="column.key === 'handle'">
              <a-button type="link" @click="previewTicket(record)"
                >预览</a-button
              >
              <a-button type="link" @click="handleDownload(record)"
                >下载</a-button
              >
              <a-button type="link" @click="handleCopy(record)"
                >复制新增</a-button
              >
              <a-button
                v-if="
                  record.state === TICKET_STATUS_ENUM.EFFECTIVE ||
                  record.state === TICKET_STATUS_ENUM.EXPIRED
                "
                type="link"
                @click="handleDelay(record)"
                >申请延期</a-button
              >
            </template>
          </template>
        </a-table>
        <!-- <a-empty
          v-if="!tableLoading && !infoData.workTicketDtoList?.length"
          style="opacity: 0.5; margin-top: 50px"
        >
          <template #description>
            <span> 暂无工作票记录，可点击新增工作票申请 </span>
          </template>
        </a-empty> -->
      </div>
    </div>
    <template #footer>
      <div class="footerBar">
        <a-button type="primary" @click="handleAddTicket">新增工作票</a-button>
      </div>
    </template>
  </a-modal>
  <!-- 新增工作票 -->
  <AddTicket
    :addTicketVisible="addTicketVisible"
    :rowData="rowData"
    :ticketRowData="ticketRowData"
    :infoData="infoData"
    :stationtList="stationtList"
    :orderPageType="orderPageType"
    :isCopy="isCopy"
    @update:addTicketVisible="(val) => (addTicketVisible = val)"
    @getOrderList="getWorkOrderDetail"
  />
  <!-- 申请延期 -->
  <Delay
    :delayVisible="delayVisible"
    :rowData="rowData"
    :ticketRowData="ticketRowData"
    @update:delayVisible="(val) => (delayVisible = val)"
    @getOrderList="getWorkOrderDetail"
  />
  <Ticket
    ref="ticketRef"
    :ticketVisible="ticketVisible"
    :rowData="rowData"
    :ticketRowData="ticketRowData"
    :infoData="infoData"
    @update:ticketVisible="(val) => (ticketVisible = val)"
  />
</template>
<script setup>


import AddTicket from "./addTicket.vue";
import Delay from "./delay.vue";
import Ticket from "./ticket.vue";
import {
  WORK_ORDER_STATUS,
  WORK_ORDER_PRIORITY,
  WORK_ORDER_TYPE,
  TICKET_STATUS,
  TICKET_STATUS_ENUM
} from "@/constants/workOrder";
const $api = inject("$api");
const props = defineProps({
  ticketInfoVisible: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
  },
  workOrderType: {
    type: String,
  },
  stationtList: {
    type: Array,
  },
});
const ticketRef = ref();
const visible = ref(props.ticketInfoVisible);
const ticketVisible = ref(false);
const emits = defineEmits(["update:ticketInfoVisible", "getOrderList"]);
const tableData = ref([]);
const addTicketVisible = ref(false);
const delayVisible = ref(false);
const filterForm = ref({
  pageSize: 10,
  pageNumber: 1,
});
const locale = {
  emptyText: "暂无工作票记录，可点击新增工作票申请"
}
const total = ref(0);
const columns = ref([
  {
    title: "序号",
    dataIndex: "index",
    key: "index",
    width: 60,
    resizable: true,
    align: "center",
  },
  {
    title: "工作票编号",
    dataIndex: "ticketCode",
    key: "ticketCode",
    resizable: true,
    align: "center",
  },
  {
    title: "到期时间",
    dataIndex: "expireDateFormat",
    key: "expireDateFormat",
    resizable: true,
    align: "center",
  },
  {
    title: "工作票状态",
    dataIndex: "state",
    key: "state",
    resizable: true,
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "handle",
    key: "handle",
    align: "center",
    fixed: "right",
  },
]);

watch(
  () => props.ticketInfoVisible,
  (val) => {
    visible.value = val;
    if (val) {
      getWorkOrderDetail();
    }
  }
);
const ticketRowData = ref({});
const handleDelay = (record) => {
  ticketRowData.value = record;
  delayVisible.value = true;
};

const cancel = () => {
  emits("update:ticketInfoVisible", false);
};
const infoData = ref({});
const getWorkOrderDetail = async () => {
  tableLoading.value = true;
  const res = await $api.workOrderDetail(props.rowData.id);
  tableLoading.value = false;
  if (res && res.code === 0 && res.data) {
    infoData.value = res.data;   
    infoData.value.location =
      infoData.value?.provName + infoData.value?.cityName || "";
  }
};
const tableLoading = ref(false);
const previewTicket = (record) => {
  ticketRowData.value = record;
  ticketVisible.value = true;
};
const handleDownload = (record) => {
  ticketRowData.value = record;
  ticketRef.value.handleDownload();
};
const isCopy = ref(false);
const handleCopy = (record) => {
  ticketRowData.value = record;
  isCopy.value = true;
  addTicketVisible.value = true;
};
const handleAddTicket = () => {
  isCopy.value = false;
  addTicketVisible.value = true;
};
</script>

<style lang="less" scoped>
.ant-table {
  .ant-btn {
    padding: 4px 5px;
  }
}
.footerBar {
  text-align: center;
  margin-top: 30px;
}
.details {
  .title {
    font-size: 15px;
    margin: 30px 0 0 0;
  }
  .detailsInfo {
    // padding: 0 20px;
  }
  .infoItem {
    width: 304px;
    display: inline-block;
    margin-top: 20px;
  }
  .itemLabel,
  .itemName {
    display: inline-block;
  }
  .itemLabel {
    width: 120px;
    text-align: right;
  }
  .itemName {
    width: 183px;
    vertical-align: top;
  }
}
.table {
  margin-top: 20px;
}
</style>